import { defineStore } from "pinia";

const useThemeStore = defineStore("theme", () => {
  const theme = ref("light");
  const toggleTheme = () => {
    theme.value = theme.value === "light" ? "dark" : "light";
  };
  watch(
    () => theme.value,
    (value) => {
      // document.documentElement.setAttribute("data-theme", value);
      document.documentElement.setAttribute("class", value);
    },
    { immediate: true }
  );
  return {
    theme,
    toggleTheme,
  };
});

export default useThemeStore;
